<template>
  <div class="peopleinfo">
    <!-- 标题 -->
    <van-nav-bar class="header">
      <template #left>
        <van-icon @click="$router.back()" color="#fff" name="arrow-left" size="20" />
        <span class="company">家政平台</span>
      </template>
    </van-nav-bar>
    <!-- 标题end -->
    <div class="action">
    <!-- 人物介绍 -->
      <van-card
      centered
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
    <template #title>
      <div class="title">
        <span>商品标题</span>
        <van-button round type="info" size="small">关注</van-button>
      </div>
    </template>
    <template #tags>
        <van-tag plain type="primary" round  size="large">二星育婴师</van-tag>
    </template>
    <template #price>
        <span>地址 | </span>
        <span>年龄 | </span>
        <span>经验  </span>
    </template>
    <template #footer>
        <span>注册公司： </span><br>
        <span>职业： </span>
    </template>
    </van-card>
    <!-- 人物介绍end -->

    <!-- 身份信息以核实 -->
      <van-nav-bar>
        <template #left>
          <van-icon name="todo-list" size="18" />&nbsp;
          <span>身份信息以核实</span>
        </template>
        <template #right>
          <van-tag plain type="primary" round  size="large">电话联系</van-tag><br>
          <van-tag plain type="primary" round  size="large">微信联系</van-tag>
        </template>
      </van-nav-bar>
      <!-- 主要技能 -->
      <van-cell title="主要技能" >
        <template #icon>
            <span class="icon"></span>
        </template>
      </van-cell>
      <div >
         <van-tag plain type="primary" round size="large">月嫂</van-tag>
         <van-tag plain type="primary" round size="large">育婴师</van-tag>
         <van-tag plain type="primary" round size="large">保洁</van-tag>
         <van-tag plain type="primary" round size="large">保姆</van-tag>
         <van-tag plain type="primary" round size="large">早教</van-tag>
         <van-tag plain type="primary" round size="large">养老</van-tag>
         <van-tag plain type="primary" round size="large">家装</van-tag>
         <van-tag plain type="primary" round size="large">产康师</van-tag>
      </div>
      <!-- 主要技能end -->

      <!-- 简介 -->
      <van-cell title="个人简介" >
        <template #icon>
            <span class="icon"></span>
        </template>
      </van-cell>
      <div class="info">
          <span>123</span>
      </div>
      <!-- 简介 -->
      <van-cell title="个人简介" >
        <template #icon>
            <span class="icon"></span>
        </template>
      </van-cell>
      <div class="info">
          <span>任职公司：</span><br>
          <span>籍贯民族：</span><br>
          <span>生肖属相：</span><br>
          <span>星座：</span><br>
          <span>出生日期：</span><br>
          <span>学历：</span><br>
      </div>

      <!-- 证件信息 -->
      <van-cell title="证件信息" >
        <template #icon>
            <span class="icon"></span>
        </template>
      </van-cell>
      <div>
        <van-image
          class="img"
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          class="img"
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          class="img"
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
  </div>
    <van-tabbar class="layout-tabbar" route>
      <van-tabbar-item>
        <van-icon name="chat" size='35' />
        <span class="text">评价</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon name="share" size='35' />
        <span class="text">分享</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon name="wechat" size='35' />
        <span class="text">微信联系</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon name="phone" size='35' />
        <span class="text">电话联系</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: ['1', '2', '3'],
      value: '',
      showPicker: false,
    }
  },
  methods: {
    // 表单提交
    onSubmit () {

    },
    // 点击家政公司
    onConfirm (value, index) {
      this.value1 = value
      this.showPicker1 = false
    },
  },
}
</script>

<style scoped lang='scss'>
.peopleinfo{
    position: relative;
    background-color: rgb(223, 219, 219);
    .action{
        position: relative;
        transform: translateY(-50px);
        // height: 1080px;
        margin: 0 20px;
        padding-bottom: 50px;
        border-radius: 10px;
        background-color: #fff;
        z-index: 99999;
        .icon{
            width: 10px;
            height: 30px;
            margin: 10px 10px 0 0;
            background-color: #3f51b5;
        }
        .van-tag--plain {
          margin: 20px 5px;
        }
        .title {
          font-size: 25px;
          font-weight: 700;
          display: flex;
          justify-content: space-between;
        }
        .van-button--info{
          width: 150px;
        }
        .van-card__footer{
          text-align: left;
        }
        .info{
          padding: 0 20px;
          font-size: 30px;
          color: #666;
        }
        .img{
          margin-left: 20px;
        }
    }
    .van-tabbar--fixed{
      position: absolute !important;
       z-index: 99999999999999;
      ::v-deep .van-tabbar-item__text {
          display: flex;
          flex-direction: column;
          align-items: center;
          .text{
              margin-top: 10px;
          }
        }
    }

}
.header{
    height: 200px;
    font-weight: 700;
    color: #fff;
    background-color: #3f51b5;
}

</style>
